<template>
  <div class="app-container">
    <zhezhao :is-show="isShow" />
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :model="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户姓名 / 手机号">
              <el-input v-model="form.user" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单号" >
              <el-input v-model="form.order_sn" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务名称" >
              <el-input v-model="form.service_name" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" 支付日期" >
              <!-- <el-input v-model="form.keyword" clearable/> -->
              <el-date-picker
                v-model="form.pay_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                size='large'
                :default-time="['00:00:00', '23:59:59']"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态" >
               <el-select v-model="form.order_status" clearable>
                <el-option
                  v-for="item in examineList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column type="index" label="序号"  align="center"/>
        <el-table-column prop="order_sn" label="订单号"  align="center"/>
        <el-table-column prop="project_name" label="服务名称"  align="center"/>
        <el-table-column  label="服务分类" prop="category_name" align="center">
          <!-- <template slot-scope="scope">
            {{scope.row.start_time.split(' ')[0]}} 至 {{scope.row.end_time.split(' ')[0]}}
          </template> -->
        </el-table-column>
        <el-table-column prop="origin_price" label="原价" align="center"/>
        <el-table-column prop="price" label="售价" align="center"/>
        <el-table-column prop="sale_num" label="数量" align="center"/>
        <el-table-column prop="actual_price" label="实付款" align="center"/>
        <el-table-column prop="division_rate" label="分佣比列" align="center"/>
        <el-table-column prop="last_price" label="最终平台结算金额" align="center"/>
        <el-table-column prop="username" label="用户名" align="center"/>
        <el-table-column prop="userphone" label="手机号" align="center"/>
        <el-table-column prop="payment" label="支付方式"align="center" >
            <template slot-scope="scope">
            {{scope.row.payment | payment}}
          </template>
        </el-table-column>
        <el-table-column prop="order_status_name" label="订单状态"align="center">
         <!-- <template slot-scope="scope">
            {{scope.row.order_status }}
          </template> -->
        </el-table-column>
        <el-table-column prop="created_at" label="下单时间"align="center" />
        <el-table-column prop="pay_time" label="支付时间"align="center" />

        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="toRoutes('serOrderInfo',scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>

import { orderList, severOrderExpor} from '@/api/orderMange'
import zhezhao from '@/components/CreateMask/index'
import commonFn from '@/utils/common'

export default {
  components: { zhezhao },

  data() {
    return {
      // loading层
      tableLoading: false,
      // 提交form
      form: {
        page: 1,
        pageSize: 10,
        order_sn:'',
        service_name:'',
        pay_time:'',
        user:'',
        order_status:'',
      },
      isShow: false,
      examineList: [
        {
          name: '待付款',
          value: '1'
        },
        {
          name: '待消费',
          value: '2'
        },
        {
          name: '已消费',
          value: '4'
        },
        {
          name: '已关闭',
          value: '99'
        },
      ],
      tableData: [],
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 60
    }
  },
  mounted() {
    this.getSource()
    this.getList()
  },
  filters:{
    payment:function (val) {
      switch (val) {
        case 3:
          return "全积分";
          break;
        case 1:
          return "支付宝";
          break;
        case 2:
          return "微信";
          break;
        default:
          return "--";
          break;
      }
    },
    // status:function (val) {
    //   switch (val) {
    //     case 1:
    //       return "待支付";
    //       break;
    //     case 2:
    //       return "待消费";
    //       break;
    //     case 4:
    //       return "已消费";
    //       break;
    //     case 7:
    //       return "已退款";
    //       break;
    //     case 8:
    //       return "支付超时";
    //       break;
    //     case 10:
    //       return "退款失败";
    //       break;
    //     default:
    //       return "--";
    //       break;
    //   }
    // }
  },
  methods: {
    // 路由跳转
    toRoutes(e, id) {
      const route = { name: e, query: { id: id }}
      this.$router.push(route)
    },
    // toRoute(e, id) {
    //   const route = { name: e, params: id}
    //   this.$router.push(route)
    // },
   
    // 查询
    searchList() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 列表数据获取
    getList() {
      this.tableLoading = true
      orderList(this.form)
        .then(res => {
          //  console.log(res.data)
          if (res.data.code == 200) {
            // console.log(res)
            this.tableData = res.data.data.data;
            this.page_totals = res.data.data.total;
            this.tableLoading =false

          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // // 重置
    // reset() {
    //   this.form = {
    //     page: 1,
    //     pageSize:10,
    //     status:'',
    //     keyword:''
    //   }
    //   this.getList()
    // },
    //导出
    handleExport() {
      severOrderExpor({
        order_sn:this.form.order_sn,
        user:this.form.user,
        service_name:this.form.service_name,
        order_status:this.form.order_status,
        pay_time:this.form.pay_time,
      })
        .then(res => {
          commonFn.downFile('服务订单', res)
        })
        .catch(err => {
          this.errorStatus(err)
        })
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    // 获取审核状态
    getSource() {
      let  source = sessionStorage.getItem('source')
      let  status = sessionStorage.getItem('check_status')
      if(status==3){
        this.isShow = false
      }else{
        this.isShow = true
      }
    }
  }
}
</script>
<style scoped>
.app-container {
padding: 20px !important;
}
.allCenter{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
